@extends('layouts.admin_common') @section('content')
    <div class="breadcrumbs_container">{{
	Breadcrumbs::render('admin.category_master') }}</div>
    <div class="system_tab_line"></div>

    @if(app('env')=='production')
        <link rel="stylesheet" href="{{ secure_asset('/css/tree.css') }}">
        <link rel="stylesheet" href="{{ secure_asset('/css/iconfont.css') }}">
        <script src="{{ secure_asset('/js/sy_common.js') }}"></script>
    @else
        <!-- SSLではない場合 -->
        <link rel="stylesheet" href="{{ asset('/css/tree.css') }}">
        <link rel="stylesheet" href="{{ asset('/css/iconfont.css') }}">
        <script src="{{ asset('/js/sy_common.js') }}"></script>
    @endif



    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="lyx_form">
                        <?php echo csrf_field(); ?>
                        <input type="hidden" class="form-control " name="category_id" value="" id="lyx_category_id">
                        <input type="hidden" class="form-control " name="pid" value="" id="lyx_pid">
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">コード:</label>
                            <input type="text" class="form-control" id="lyx_category_code" name="category_code">
                        </div>

                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">カテゴリー名:</label>
                            <input type="text" class="form-control" id="lyx_category_name" name="category_name">
                        </div>

                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">英語表記:</label>
                            <input type="text" class="form-control" id="lyx_category_en" name="category_en">
                        </div>

                        <div class="form-group">
                            <label for="message-text" class="col-form-label">並べ替え:</label>
                            <input type="number" class="form-control" id="lyx_sort" name="sort" value="0">
                        </div>

                        <div class="form-group">
                            <label for="message-text" class="col-form-label">画像:</label>
                            <textarea class="form-control" id="lyx_category_image" name="category_image"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="lyx_save_submit">Save</button>
                </div>
            </div>
        </div>
    </div>



    <div class="tree well">
        <div class="row">
            <button class="btn btn-primary button_normal" data-toggle="modal" data-target="#exampleModal" data-pid="0"
                    data-type="add">クラスの分類を追加
            </button>
        </div>
        <ul>
            @foreach($list as $vo)
                <li data-title="{{$vo['category_name']}}">
				<span>
					@isset($vo['category_image'])
                        <img style="width: 20px;height: 20px;" src="{{$vo['category_image']}}"/>
                    @endisset
                    {{$vo['category_name']}}</span>
                    <a href="#" class="ajax-list" data-toggle="modal" data-target="#exampleModal"
                       data-pid="{{$vo['id']}}" data-type="add">
                        <i class="iconfont hd-tianjia1"></i>
                    </a>
                    <a href="#" class="ajax-list" data-toggle="modal" data-target="#exampleModal"
                       data-id="{{$vo['id']}}" data-type="edit">
                        <i class="iconfont hd-bianji"></i>
                    </a>

                    <a href="#" class="ajax-list lyx_del" data-id="{{$vo['id']}}">
                        <i class="iconfont hd-shanchu1"></i>
                    </a>
                    @isset($vo['childs'])
                        {!!getTreeHtml($vo['childs'])!!}
                    @endisset
                </li>
            @endforeach
        </ul>
    </div>


    <script type="text/javascript">
        $(function () {
            $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
            $('.tree li.parent_li > span').on('click', function (e) {
                var children = $(this).parent('li.parent_li').find(' > ul > li');
                if (children.is(":visible")) {
                    children.hide('fast');
                    $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
                } else {
                    children.show('fast');
                    $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
                }
                e.stopPropagation();
            });
        });


        $('#exampleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var pid = button.data('pid') // Extract info from data-* attributes
            var type = button.data('type') // Extract info from data-* attributes
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            var modal = $(this)
            var that = modal.find('.modal-body');
            var view_text = 'トップクラス';
            if (pid != 0) {
                view_text = '下級分類'+button.parent('li').data('title');
            }
            modal.find('.modal-title').text(view_text);

            if (type == 'add') {
                modal.find('#lyx_pid').val(pid);
            } else {
                var id = button.data('id');
                getCatInfo(id, that);
            }

            $("#lyx_save_submit").off().on('click', function () {
                addEdit();
            })

        })

        $(".lyx_del").on('click', function () {
            var id = $(this).data('id');
            delCategory(id);
        })

        function getCatInfo(category_id, that) {
            hdAjax({
                url: '{{url("admin/get_category_info")}}',
                data: {category_id: category_id},
                success: function (retData) {
                    if (retData.code == 1001) {
                        that.find('#lyx_category_id').val(retData.data.category_id);
                        that.find('#lyx_pid').val(retData.data.pid);
                        that.find('#lyx_category_code').val(retData.data.category_code);
                        that.find('#lyx_category_name').val(retData.data.category_name);
                        that.find('#lyx_category_en').val(retData.data.category_en);
                        that.find('#lyx_sort').val(retData.data.sort);
                        that.find('#lyx_category_image').val(retData.data.category_image);
                    } else {
                        layuiTopMsg(retData.msg);
                    }
                }
            })
        }

        function addEdit() {
            var data = $('#lyx_form').serialize();
            hdAjax({
                url: '{{url("admin/save_category")}}',
                data: data,
                type: 'post',
                success: function (retData) {
                    successAlert(retData.msg, 'category_tree');
                }
            })
        }

        function delCategory(id) {
            hdAjax({
                url: '{{url("admin/del_category")}}',
                data: {category_id: id},
                success: function (retData) {
                    successAlert(retData.msg, 'category_tree');
                }
            })
        }


    </script>

@endsection

